<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统中心</el-breadcrumb-item>
        <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="box-card">
        <el-button  type="primary" @click="dialogVisible = true">添加店铺</el-button>
      </el-card>
    <el-table border :data="shopList" style="width: 100%">
      <el-table-column prop="code" label="门店编号" align="center"></el-table-column>
      <el-table-column prop="shopName" label="门店名称" align="center"></el-table-column>
      <el-table-column prop="address" label="所属区域" align="center"></el-table-column>
      <el-table-column prop="realName" label="店长" align="center"></el-table-column>
      <el-table-column prop="deleted" label="门店状态" align="center">
        <template slot-scope="scope">
          {{scope.row.deleted|deletedFit}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <!--点击按钮 需要绑定@click的时间 例如 @click="add"-->
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="editById(scope.row)">修改</el-button>
          <el-button type="warning" size="mini"  @click="delById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-dialog title="添加店铺" :visible.sync="dialogVisible" width="1000" @close="clean">
        <el-form ref="shopForm" :model="shopForm" label-width="80px" >
          <el-row>
            <el-col :span="11">
              <el-form-item label="店铺名字" prop="realName">
                <el-input v-model="shopForm.shopName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="店铺地址" prop="address">
                <el-input v-model="shopForm.address"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="人员数量" prop="staffMemberPhone">
                <el-input v-model="shopForm.memberNum"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="店长" prop="StaffMemberCode">
                <el-select v-model="shopForm.StaffMemberCode" placeholder="请选择">
                  <el-option
                    v-for="item in staffMemberList"
                    :label="item.realName"
                    :key="item.code"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
<!--            <el-form-item label="所属店铺">-->
<!--              <el-input v-model="staffMemberForm.shopCode"></el-input>-->

<!--            </el-form-item>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible=false">取 消</el-button>
          <el-button type="primary" @click="addStaffMembers">确 定</el-button>
        </span>
      </el-dialog>

        <el-dialog title="修改管理人员" :visible.sync="dialogVisible2" width="1000" @close="clean">
          <el-form ref="shopForm" :model="shopForm" label-width="80px"  >
            <el-row>
              <el-col :span="11">
                <el-form-item label="店铺名字" prop="shopName">
                  <el-input v-model="shopForm.shopName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="店铺地址" prop="address">
                  <el-input v-model="shopForm.address"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-col :span="11">
              <el-form-item label="人员数量" prop="memberNum">
                <el-input v-model="shopForm.memberNum"></el-input>
              </el-form-item>
            </el-col>
            <!--<el-col :span="11">
            <el-form-item label="店铺编号" prop="code">
              <el-input v-model="shopForm.code"></el-input>
            </el-form-item>
          </el-col>-->
<!--            <el-col :span="11">-->
<!--              <el-form-item label="店铺状态" prop="code">-->
<!--                <el-input v-model="shopForm.deleted"></el-input>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible2=false">取 消</el-button>
            <el-button type="primary" @click="updateTeacher()">确 定</el-button>
          </span>
        </el-dialog>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment'
export default {

  name: 'shopList',
  data () {
    return {
      shopList: [],
      dialogVisible2: false,
      shopForm: {
          StaffMemberCode:'',
        shopName:'',
        address:'',
        memberNum:'',
        code:''
      },
      dialogVisible: false,
      staffMemberList: []
    }
  },
  methods: {
    // 修改回显
    editById: function (row) {
      this.shopForm = row
      this.dialogVisible2 = true
    },
    // 修改信息
    updateTeacher: function () {
      this.$http.post('shop/updateShop?id=' + this.shopForm.id +
                    '&shopName=' + this.shopForm.shopName +
                    '&address=' + this.shopForm.address +
                    '&memberNum=' + this.shopForm.memberNum +
                    '&StaffMemberCode=' + this.shopForm.StaffMemberCode).then((res) => {
        if (res.data.success) {
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.dialogVisible2 = false
        } else {
          this.$message({
            message: res.data.message,
            type: 'error'
          })
        }
        this.searchShop()
      })
    },
    clean: function () {
      this.shopForm = {}
    },
    // 添加管理人员
    addStaffMembers: function () {
      this.$http.post('shop/addShop?shopName=' + this.shopForm.shopName +
                    '&address=' + this.shopForm.address +
                    '&memberNum=' + this.shopForm.memberNum +
                    '&StaffMemberCode=' + this.shopForm.StaffMemberCode).then((res) => {
        if (res.data.success) {
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.clean()
          this.dialogVisible = false
        } else {
          this.$message({
            message: res.data.message,
            type: 'error'
          })
        }
        this.searchShop()
      })
    },

    // 逻辑删除
    delById: function (id) {
      this.$http.post('/shop/delShop?shopId=' + id).then((res) => {
        if (res.data.success) {
          this.$message({
            message: res.data.message,
            type: 'success'
          })
        }
        this.searchShop()
      })
    },
    // 店铺列表
    searchShop: function () {
      this.$http.post('/shop/getShop').then((res) => {
        if (res.data.success){
          this.shopList = res.data.result.shopList
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    searchStaffMember: function () {
      this.$http.get('/staffMember/getStaffMember').then((res) => {
          console.log(res)
        if (res.data.success){
            this.staffMemberList = res.data.result.staffMember;
        } else {
            this.$message.error(res.data.message)
        }
      })
    }

  },
  mounted () {
    this.searchShop()
    this.searchStaffMember()
  },
  filters: {
    hireDateFit: function (val) {
      return moment(val).format('YYYY-MM-DD HH:mm:ss')
    },
    deletedFit: function (val) {
      if (val != 1) {
        return '开业'
      }
      if (val == 1) {
        return '停业'
      }
    },
    specificPositionFit: function (val) {
      if (val == 1) {
        return '店长'
      }
      if (val == 2) {
        return '店员'
      }
    }
  }
}
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 1280px;
  }
</style>
